<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>哆啦A梦</title>
  <style>
    *{
  margin: 0;
  padding: 0;
}
html,body{
	width: 100%;
	height: 100vh;
	box-sizing: border-box;/*浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。*/
	justify-content: center;/*水平居中*/
	align-items: center;/*垂直居中*/
	display: -webkit-flex;
}
.doraemon{
	width: 600px;
	height: 600px;
	/*border: 10px solid green;*/
}
 
/*头*/
.doraemon>.head{
	margin: auto;
	width: 320px;
	height: 320px;
	border: 2px solid black;
	border-radius: 50%;
	background: deepskyblue;
}
 
/*脸*/
.doraemon>.head>.face{
	margin: auto;
	width: 280px;
	height: 270px;
	border: 2px solid black;
	border-radius: 50%;
  background: white;
  transform: translateY(47px);
  z-index: -1;
}
 
/*眼睛*/
.doraemon>.head>.face>.eyes{
	margin: auto;
	width: 150px;/*眼睛盒子大小*/
	height: 80px;
	/*border: 2px solid black;*/
	display:flex;/*行样式显示*/
	transform: translateY(-32px);
	
}
.doraemon>.head>.face>.eyes>.left_eye{
	margin: auto;
	width: 60px;/*眼睛的大小*/
	height: 80px;
	border: 2px solid black;
	border-radius:50%;
	background:white;
	transform: translateX(7px);/*左眼向右移动*/
}
.doraemon>.head>.face>.eyes>.right_eye{
	margin: auto;
	width: 60px;
	height: 80px;
	border: 2px solid black;
	border-radius:50%;
	background:white;
	transform: translateX(-7px);/*右眼向左移动*/
}
 
/*眼珠*/
.doraemon>.head>.face>.eyes>*:before{
	margin:50% auto;
	content: "";
	display: block;
	width: 10px;
	height: 18px;
	border:2px solid black;
	border-radius: 50%;
	background: black;
}
.doraemon>.head>.face>.eyes>.left_eye:before{
	transform: translateX(10px);
}
.doraemon>.head>.face>.eyes>.right_eye:before{
	transform: translateX(-10px);
}
 
/*眼白*/
.doraemon>.head>.face>.eyes>*:after{
	margin:-70% auto;
	content: "";
	display: block;
	width: 3px;
	height: 3px;
	border:2px solid white;
	border-radius: 50%;
	background: white;
}
.doraemon>.head>.face>.eyes>.left_eye:after{
	transform: translateX(10px);
}
.doraemon>.head>.face>.eyes>.right_eye:after{
	transform: translateX(-10px);
}
 
/*鼻子*/
.doraemon>.head>.face>.nose{
	margin:auto;
	width:35px;
	height: 35px;
	border: 2px solid black;
	border-radius: 50%;
	background:crimson;
	transform: translateY(-53px);
}
.doraemon>.head>.face>.nose:before{
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border: 1px solid white;
	border-radius: 50%;
	background: white;
	transform: translate(3px ,4px);
}
.doraemon>.head>.face>.nose:after{
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	border: 1px solid brown;
	border-radius: 50%;
	background:brown;
	transform: translate(9px ,0px);
}
 
/*嘴巴*/
.doraemon>.head>.face>.mouth{
	margin: auto;
	width: 200px;
	height: 110px;
	/*border: 2px solid black;*/
	overflow: hidden;
}
 
/*口腔*/
.doraemon>.head>.face>.mouth>.cavity{
	margin: auto;
	width: 200px;
	height: 250px;
	border: 2px solid black;
	border-radius:50% ;
	background:darkred;
	transform: translate(-2px,-57%);
	overflow: hidden;
}
 
/*舌头*/
.doraemon>.head>.face>.mouth>.cavity>.left_tongue{
	width: 100px;
	height: 125px;
	/*border: 2px solid black;*/
	border-radius:50% 50% 0 0;
	background: red;
	transform:  translate(30px,170px) rotate(-45deg);
}
.doraemon>.head>.face>.mouth>.cavity>.right_tongue{
	width: 100px;
	height: 125px;
	/*border: 2px solid black;*/
	border-radius:50% 50% 0 0;
	background: red;
	transform:  translate(70px,45px)  rotate(45deg);
}
/*嘴唇*/
.doraemon>.head>.face>.left_lip{
	margin: auto;
	width: 102px;
	height: 17px;
	border: 2px solid black;
    border-color:transparent transparent black black;
	border-radius:50% ;
	background: white;
	float: left;
	transform: translate(38px,-120px) rotate(-5deg);
	
	
}
.doraemon>.head>.face>.left_lip:before{
	content: "";
	display: block;
	width: 60px;
	height: 70px;
	border: 2px solid black;
	border-color:black transparent transparent black;
	border-radius:50% ;
	background: white;
	transform: translate(-29px,-62px) rotate(-32deg);
  
}
.doraemon>.head>.face>.right_lip{
	margin: auto;
	width: 102px;
	height: 17px;
	border: 2px solid black;
	border-color:transparent black black transparent;
	border-radius:50% ;
	background: white;
	float: right;
	transform: translate(-38px,-120px) rotate(5deg);
	
}
.doraemon>.head>.face>.right_lip:before{
	content: "";
	display: block;
	width: 60px;
	height: 70px;
	border: 2px solid black;
	border-color:black black transparent transparent;
	border-radius:50% ;
	background: white;
	transform: translate(66px,-62px) rotate(32deg);
}
.doraemon>.head>.face>.right_lip:after{
	content: "";
	display: block;
	width: 3px;
	height: 57px;
	background: black;
	transform: translate(-2px,-118px) rotate(-5deg);
}
/*胡须*/
.doraemon>.head>.face>.left-beards{
	width: 90px;
  height: 3px;
  background: black;
  transform: translate(0px,-170px) rotate(4deg);
  float: left;
}
.doraemon>.head>.face>.left-beards:before{
	content: " ";
	display: block;
	width: 85px;
  height: 3px;
  background: black;
  transform: translate(5px,-40px) rotate(20deg);
}
.doraemon>.head>.face>.left-beards:after{
	content: " ";
	display: block;
	width: 90px;
  height: 3px;
  background: black;
  transform: translate(5px,30px) rotate(-15deg);
}
.doraemon>.head>.face>.right-beards{
	width: 90px;
  height: 3px;
  background: black;
  transform: translate(0px,-170px) rotate(-4deg);
  float: right;
}
.doraemon>.head>.face>.right-beards:before{
	content: " ";
	display: block;
	width: 85px;
  height: 3px;
  background: black;
  transform: translate(0px,-40px) rotate(-20deg);
}
.doraemon>.head>.face>.right-beards:after{
	content: " ";
	display: block;
	width: 90px;
  height: 3px;
  background: black;
  transform: translate(-5px,30px) rotate(15deg);
}
 
/*身体*/
.doraemon>.body{
	margin: auto;
	width: 220px;
	height: 180px;
	border: 2px solid black;
	border-color: transparent black;
	border-radius:10%;
	background: deepskyblue;
	transform: translate(0px,-16px);
}
 
/*围脖*/
.doraemon>.body>.twitter{
	margin: auto;
	width: 192px;
	height: 16px;
	border: 2px solid black;
	border-radius:10% 10% 35% 35%;
	background: red;
	transform: translate(0px,-19px);
}
 
/*铃铛*/
.doraemon>.body>.twitter>.bell{
	margin: auto;
	width: 50px;
	height: 50px;
	border-radius:50% ;
	border: 2px solid black;
	background:yellow;
}
.doraemon>.body>.twitter>.bell:before{
	content: "";
	display: block;
	margin: auto;
	width: 66px;
	height: 50px;
	border-radius:50% ;
	border: 2px solid black;
	border-color:black transparent transparent;
	background: yellowellow;
	transform: translate(-10px, 10px) ;
 
}.doraemon>.body>.twitter>.bell:after{
	content: "";
	display: block;
	margin: auto;
	width: 66px;
	height: 50px;
	border-radius:50% ;
	border: 2px solid black;
	border-color:black transparent transparent;
	background: yellowellow;
	transform: translate(-10px, -50px) ;
 
}
.doraemon>.body>.twitter>.bell>.point{
	margin: auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2px solid black;
	background: brown;
  transform: translate(0px, -30px);
}
.doraemon>.body>.twitter>.bell>.point:after{
	content: "";
	display: block;
	margin: auto;
	width: 3px;
	height: 15px;
	background: black;
	transform: translate(0px, 10px);
}
/*口袋*/
.doraemon>.body>.pockets{
	margin: -39px auto;
	width: 180px;
	height: 170px;
	border: 2px solid black;
	border-radius:50% 50% 45% 45%;
	background: white;
	z-index: -1;
}
.doraemon>.body>.pockets:before{
	content: " ";
	display: block;
	margin: 25px auto;
	width: 120px;
	height: 120px;
	border:2px solid black ;
	border-radius: 50%;
	border-color:transparent  transparent black black; 
	transform: rotate(-45deg);
}
.doraemon>.body>.pockets:after{
	content: " ";
	display: block;
	margin: -107px auto;
	width: 120px;
	height: 20px;
	border-bottom:2px solid  black; 
}
 
/*手*/
.doraemon>.body>.left_hand{
	width: 140px;
	height: 50px;
	border: 2px solid black;
 	border-color: black  transparent  black transparent; 
	border-radius:70% 40% 40% 70% ;
	background: deepskyblue;
	z-index: -1;
	position: relative;
	top: -102px;
	left: -76px;
	transform: rotate(-45deg);
}
.doraemon>.body>.left_hand:before{
	content: " ";
	display: block;
	width: 50px;
	height: 50px;
	border: 2px solid black;
	border-radius:50% ;
	background: white;
	transform: translate(-30px,0px);
}
.doraemon>.body>.right_hand{
	width: 140px;
	height: 50px;
	border: 2px solid black;
 	border-color: black  transparent  black transparent; 
	border-radius:40% 70% 70% 40% ;
	background: deepskyblue;
	z-index: -1;
	position: relative;
	top: -215px;
	left: 188px;
	transform: rotate(-30deg);
}
.doraemon>.body>.right_hand:before{
	content: " ";
	display: block;
	width: 50px;
	height: 50px;
	border: 2px solid black;
	border-radius:50% ;
	background: white;
	transform: translate(105px,0px);
}
/*脚*/
.doraemon>.foot{
	margin: -16px auto;
	width:270px;
	height: 50px;
/*	border: 2px solid black;*/
}
.doraemon>.foot>*{
	width: 120px;
	height: 50px;
	border: 2px solid black;
	/*border-color: transparent black black black;*/
	background: white;
	z-index: -1;
	/*transform: translate(0px,-40px);*/
	position: relative;
  top: -15px;
}
.doraemon>.foot>.left_foot{
	border-radius:50% 50% 35% 50%;
	transform: rotate(-2deg);
	float: left;
}
.doraemon>.foot>.left_foot:before{
	content: " ";
	display: block;
	width:100px;
	height: 20px;
	border: 2px solid black;
	border-radius: 50%;
	background: deepskyblue;
	transform: translate(19px,-3px);
}
.doraemon>.foot>.right_foot{
	border-radius:50% 50% 50% 35%;
	float: right;
	transform: rotate(2deg);
}
.doraemon>.foot>.right_foot:before{
	content: " ";
	display: block;
	width:100px;
	height: 20px;
	border: 2px solid black;
	border-radius: 50%;
	background: deepskyblue;
	transform: translate(-3px,-2px);
}
/*裤子*/
.doraemon>.foot>.pants{
	margin: auto;
	width: 45px;
	height: 15px;
	border-radius:  50%;
	border: 2px solid;
	border-color:black   black  transparent black;
	background: white;
	z-index: 1;
}
  </style>
 </head>
 <body>
  <div class="doraemon">
   <div class="head">
    <div class="face">
     <div class="eyes">
       <div class="left_eye"></div>
          <div class="right_eye"></div>
        </div>
        <div class="nose"></div>
        <div class="mouth">
 
         <div class="cavity">
          <div class="left_tongue"></div>
             <div class="right_tongue"></div>
         </div>
        </div>
        <div class="left_lip"></div>
        <div class="right_lip"></div>
        <div class="left-beards"></div>
        <div class="right-beards"></div>
    </div>
   </div>
      <div class="body">
       <div class="twitter">
        <div class="bell">
         <div class="point"></div>
        </div>
       </div>
       <div class="pockets"></div>
       <div class="left_hand"></div>
       <div class="right_hand"></div>
      </div>
      <div class="foot">
       <div class="left_foot"></div>
       <div class="right_foot"></div>
       <div class="pants"></div>
      </div>
  </div>
 </body>
</html>